<!--hmc 创建用户旅程第一步：设置规则-->
<template>
  <div class="page-container page-container-create">
    <!--面包屑-->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>自动化营销</el-breadcrumb-item>
        <el-breadcrumb-item>用户旅程管理</el-breadcrumb-item>
        <el-breadcrumb-item>创建用户旅程</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="stepset stepset3">
      <ul>
        <li :class="{'active':active>=1}">
          <span>1</span>
          <p>设置旅程规则</p>
        </li>
        <li :class="{'active':active>=2}">
          <span>2</span>
          <p>设计流程</p>
        </li>
        <li :class="{'active':active>=3}">
          <span>3</span>
          <p>创建成功</p>
        </li>
      </ul>
    </div>
    <div class="part">
      <p class="title t_l mb50 mt40">设置旅程规则:</p>
      <el-form :model="ruleForm" size="mini" ref="ruleForm" :rules="rules" >
        <el-form-item label="营销目的：" prop="smsSelect" class="mb30">
          <el-select v-model="ruleForm.smsSelect" placeholder="选择营销目的" size="mini" class="w410" :popper-append-to-body="false">
            <el-option
              v-for="item in tagList"
              :key="item.id"
              :label="item.tagName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="营销名称：" prop="name" class="mb30">
          <el-input
            clearable
            v-model="ruleForm.name"
            placeholder="输入营销名称"
            size="mini"
            minlength="3"
            maxlength="30"
            class="w410"
          ></el-input>
        </el-form-item>
        <el-form-item label="营销时间：" prop="resource" class="mb120">
          <el-radio-group v-model="ruleForm.resource" :disabled="isEdit && isdraft == '0'" class="mb20">
            <el-radio label="1" border>
              固定时间段
              <el-tooltip
                popper-class="atooltip"
                effect="dark"
                content="旅程有执行的起始时间"
                placement="top-start"
              >
                <span class="icon">!</span>
              </el-tooltip>
            </el-radio>
            <el-radio label="2"  border>
              无时间限制
              <el-tooltip
                popper-class="atooltip"
                effect="dark"
                content="创建成功后立即开始旅程，直到旅程动作结束为止"
                placement="top-start"
              >
                <span class="icon">!</span>
              </el-tooltip>
            </el-radio>
          </el-radio-group>
          <el-row v-show="ruleForm.resource=='1'" >
            <el-date-picker
              :readonly="isEdit && isdraft == '0'"
              v-model="ruleForm.time"
              type="datetimerange"
              value-format="timestamp"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="timeCheck"
              style="width:410px;margin-left:91px"
            ></el-date-picker>
          </el-row>
        </el-form-item>
      </el-form>
      <div class="mt30 t_c">
        <el-button class="cancelButton mr60" @click="back()">取消</el-button>
        <el-button class="searchButton" @click="submit()">下一步</el-button>
      </div>
    </div>
  </div>
</template>
<script>
// 自动化营销----------创建用户旅程第一步：设置规则   

export default {
  name: "stepOne",
  components: {},
  computed: {
      mainTabs: {
          get() {
              return this.$store.state.tab.mainTabs;
          },
          set(val) {
              this.$store.commit("updateMainTabs", val);
          }
      },
      mainTabsActiveName: {
          get() {
              return this.$store.state.tab.mainTabsActiveName;
          },
          set(val) {
              this.$store.commit("updateMainTabsActiveName", val);
          }
      }
  },
  data() {
    return {
      active: 1,                    // 当前步骤高亮值
      //form
      ruleForm: {
        name: '',                  // 营销名称
        smsSelect: '',             // 营销目的
        resource: "1",             // 营销时间  1----固定时间段    2------无限制时间
        time: "",                  // 当resource == 1  ，营销时间段
      },
      //form规则
      rules: {
        smsSelect: [
          { required: true, message: "请选择营销目的", trigger: "change" }
        ],
        name: [
          { required: true, message: "请输入营销名称", trigger: "blur" },
          { min: 3, max: 30, message: "请输入3到30个字符", trigger: "blur" }
        ],
        resource: [
          { required: true, message: "请选择营销时间", trigger: "change" }
        ]
      }, 
      // 营销目的下拉框数据（必填）
      tagList: [
        { id: 1, tagName: "拉新" },
        { id: 2, tagName: "促活" },
        { id: 3, tagName: "留存" },
        { id: 4, tagName: "转化消费" },
        { id: 5, tagName: "分享传播" },
      ],
      isEdit: false,                // 是否为编辑功能
      tripId: '',                   // 旅程ID
      isdraft: '',                  // 区分草稿状态和待开始状态， 只有草稿状态允许编辑时间  0--草稿   1--待开始
      // 活动时间校验
      timeCheck: {
        disabledDate: time => {
          if (this.time) {
            return (
              time.getTime() < Date.now() - 8.64e7 ||
              time.getTime() > new Date(this.time).getTime()
            );
          } else {
            return time.getTime() < Date.now() - 8.64e7;
          }
        }
      },
    };
  },

  methods: {
    // tabs, 删除tab
    removeTabHandle(tabName) {
        this.mainTabs = this.mainTabs.filter(item => item.name !== tabName);
        if (this.mainTabs.length >= 1) {
            // 当前选中tab被删除
            if (tabName === this.mainTabsActiveName) {
            let tab = this.mainTabs[this.mainTabs.length - 1];
            this.$router.push(
              { path: tab.path,params: tab.params, query: tab.query},
              () => {
                this.mainTabsActiveName = this.$route.name;
            }
          );
            }
        } else {
            this.$router.push("/");
        }
    },

    // 点击取消返回用户旅程列表
    back() {
      this.removeTabHandle("创建用户旅程");
    },

    // 时间戳转化为字符串
    changeDate(number) {
      var now = new Date(number),
        y = now.getFullYear(),
        m = now.getMonth() + 1,
        d = now.getDate();
      return y + "-" +( m < 10 ? "0"+m : m) + "-" +(d < 10 ? "0" + d : d) + " " + now.toTimeString().substr(0,8);
    },


    // 点击下一步掉接口保存创建活动  CreateJourney
    submit() {
      let _this = this;
      // 验证相关参数是否符合条件
      if(_this.ruleForm.smsSelect == '') {
        return _this.$message({
          type: 'error',
          message: '请设置营销目的'
        })
      }
      if(_this.ruleForm.name.length < 3 || _this.ruleForm.name.length > 30) {
        return _this.$message({
          type: 'error',
          message: '请设置营销名称'
        })
      }

      // 创建新旅程  草稿编辑状态下进行验证  如果是待开始的状态，不进行验证
      // 如果营销时间是固定时间段，验证结束时间是否>开始时间>当前时间
      if(_this.isdraft != '0' && _this.ruleForm.resource == '1') {
        if(_this.ruleForm.time.length != 2) {
          return _this.$message({
            type: 'error',
            message: '请设置营销时间'
          })
        }
        let nowTime = (new Date()).getTime();
        let beginTime = _this.ruleForm.time[0];
        let endTime =  _this.ruleForm.time[1];
        if(nowTime > beginTime) {
          return _this.$message({
            type: 'error',
            message: '旅程的开始时间不能小于当前时间'
          })
        }
        if(endTime < beginTime) {
          return _this.$message({
            type: 'error',
            message: '旅程的结束时间不能小于开始时间'
          })
        }
      }

      // 根据营销时间是否为固定时间段。判断是否添加开始时间，结束时间
      let params = {};

      // 将编辑时获取的下拉框数据进行转换
      switch(_this.ruleForm.smsSelect) {
        case '拉新':
          _this.ruleForm.smsSelect = 1;
          break;
        case '促活':
          _this.ruleForm.smsSelect = 2;
          break;
        case '留存':
          _this.ruleForm.smsSelect = 3;
          break;
        case '转化消费':
          _this.ruleForm.smsSelect = 4;
          break;
        case '分享传播':
          _this.ruleForm.smsSelect =5;
          break;
      } 

      if(_this.ruleForm.resource == '1') {
        params = {
          tripName: _this.ruleForm.name,
          tripType: _this.ruleForm.smsSelect,
          timeType: _this.ruleForm.resource,
          startTime: _this.changeDate(_this.ruleForm.time[0]),
          endTime: _this.changeDate(_this.ruleForm.time[1]),
          id: _this.tripId,
        }
      }else {
        params = {
          tripName: _this.ruleForm.name,
          tripType: _this.ruleForm.smsSelect,
          timeType: _this.ruleForm.resource,
          id: _this.tripId,
        }
      }
      //营销时间参数
      let timeType=this.ruleForm.resource;
      // 调后台接口进行保存，成功后跳转到第二步
      _this.utils.request.CreateJourney(
        params,function(res) {
          if(res.data && res.data != '') {
            if(_this.isEdit) {
              _this.$router.push({
                path: `/pages/AutoMarket/UserJourneyManagement/SetPath?id=${res.data}&isEdit=1&timeType=${timeType}`
              })
            }
            else {
              _this.$router.push({
                path: `/pages/AutoMarket/UserJourneyManagement/SetPath?id=${res.data}&timeType=${timeType}`
              })
            }
          }
        }
      );
    },

  },

  mounted() {
    let that = this;
    // 判断上个页面是否传来ID，如果有标识编辑，没有表示新增
    if(that.$route.query.id && that.$route.query.id != '') {
      that.isdraft = that.$route.query.isdraft;
      that.isEdit = true;
      
      that.tripId = that.$route.query.id;
      let params = {
        tripId: that.tripId
      }
      that.utils.request.getTripDetailAndNodeList(params,function(res) {
          if(res.data) {
            let tripInfo = res.data;
            that.ruleForm.name = tripInfo.tripName;
            that.ruleForm.resource = tripInfo.timeType == 1 ? '1' : '2';
            // 回显时间
            if( tripInfo.timeType == 1 ) {
              that.ruleForm.time=[new Date(tripInfo.startTime),new Date(tripInfo.endTime)];
            }else {
              that.ruleForm.time=[];
            }
            
            
            // 营销目的赋值
            switch(tripInfo.tripType) {
              case 1:
                that.ruleForm.smsSelect = '拉新';
                break;
              case 2:
                that.ruleForm.smsSelect = '促活';
                break;
              case 3:
                that.ruleForm.smsSelect = '留存';
                break;
              case 4:
                that.ruleForm.smsSelect = '转化消费';
                break;
              case 5:
                that.ruleForm.smsSelect = '分享传播';
                break;
            } 
          }
      })
    }
    
  }
};
</script>
<style lang="scss" scoped>
@import '../../../../assets/css/public.scss';
.title {
  font-size: 16px;
  text-align: left;
}
.part {
  padding: 0 40px;
}
/deep/ .el-radio {
  margin-right: 80px;
  position: relative;
  .icon {
    background: #ffbf5e;
    color: #fff;
    width: 10px;
    height: 10px;
    line-height: 10px;
    padding: 2px;
    border-radius: 50%;
    font-size: 10px;
    text-align: center;
    display: block;
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
  }
}
.mb50{
  margin-bottom: 50px;
}
.mt40{
  margin-top: 40px;
}
/deep/ .w410{
  width: 410px;
  .el-input__inner{
    width: 410px;
  }
}
.mb120{
  margin-bottom: 120px;
}
/deep/ .el-tooltip__popper .is-dark {
  font-size: 20px !important;
}
/* 错误提示样式重置 */ 
/deep/ .el-form-item__error {
  color: #F56C6C;
  font-size: 12px;
  line-height: 1;
  padding-top: 4px;
  position: absolute;
  top: 100%;
  left: 90px;
} 
</style>

